<script setup  lang="ts">
import {ref, reactive } from "vue"
</script>

<template>
  <div class="company">
    <div class="introduce">
        <p>圆阳智能</p>
        <p>用科技创新助力教育发展，让每个孩子都能享受智慧学习的乐趣</p>
        <el-button></el-button>
    </div>
    <div class="intention">
      
    </div>
    <div class="develop">
      
    </div>
    <div class="plan">
      
    </div>
    <div class="culture">
      
    </div>
    <div class="salary">
      
    </div>
  </div>
</template>

<style lang="scss" scoped>

.company{
    .introduce{
        width: 100%;
        height: 90vh;
        background-image: url('https://agc-storage-drcn.platform.dbankcloud.cn/v0/default-bucket-rwdjv/YuaYangIntelligence%2F%E8%83%8C%E6%99%AF%E5%9B%BE.jpg?token=5a10f770-80f3-42ed-8b03-47643d23196b'); // 替换为你的图片路径
    background-size: cover;      // 背景图覆盖整个容器
    // background-position: center; // 背景图居中
    background-repeat: no-repeat; // 不重复
}
}

.company {
  width: 100%; // 确保宽度100%
  min-height: calc(100vh - 80px); // 减去header高度
  
  .introduce {
    width: 100%;
    height: 90vh;
    background-image: url('你的图片地址');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: white; // 文字颜色
    
    p {
      margin: 10px 0;
      font-size: 1.5rem;
      
      &:first-child {
        font-size: 3rem;
        font-weight: bold;
      }
    }
    
    .el-button {
      margin-top: 20px;
    }
  }
  
  // 其他区块
  .intention, .develop, .plan, .culture, .salary {
    width: 100%;
    min-height: 100vh;
    padding: 50px;
    box-sizing: border-box;
  }
}

</style>
